<template>
<div class="ml15 row">
        <i class="el-icon-refresh pr5" v-on:click="ReportEditFresh"></i>
        <el-dropdown>
          <span  class="el-dropdown-link">
            {{CountText}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item  @click.native="CountTypeNameChange('自动刷新')">自动刷新</el-dropdown-item>
            <el-dropdown-item @click.native="CountTypeNameChange('手动刷新')">手动刷新</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <p class="ml5 " v-show="CountText=='自动刷新'">{{count}}s</p>
      </div>
</template>

<script>
export default {
  name: 'CountDown',
  data () {
    return {
      CountText: '自动刷新',
      count: '',
      timer: null
    }
  },
  mounted () {
    this.getCode()
  },
  destroyed () {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    ReportEditFresh () { // 手动刷新
      const that = this
      that.$emit('CountFresh', true)
      clearInterval(that.timer)
      that.timer = null
      if (!that.timer && that.CountText === '自动刷新') {
        that.getCode()
      }
    },
    CountTypeNameChange (_text) { // 切换刷新类型
      const that = this
      clearInterval(that.timer)
      that.timer = null
      if (_text === '自动刷新') {
        setTimeout(() => {
          that.getCode()
        })
      }
      that.CountText = _text
    },
    getCode () { // 倒计时
      const that = this
      const TIME_COUNT = 60
      if (!that.timer && that.CountText === '自动刷新') {
        that.count = TIME_COUNT
        that.timer = setInterval(() => {
          if (that.count > 0 && that.count <= TIME_COUNT) {
            that.count--
            if (that.count === 0 && that.CountText === '自动刷新') {
              that.$emit('CountFresh', true)
            }
          } else {
            clearInterval(that.timer)
            that.timer = null
            that.getCode()
          }
        }, 1000)
      }
    }
  },
  props: {

  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.modeNavBar{
  height: 30px;
  widows: 100%;
  background:rgba(251,251,251,1);
  border:1px solid rgba(234,234,234,1);
  border-left: 3px solid #409EFF;
  margin-bottom: 10px;
}

</style>
